<template>
	<view>
		<u-navbar title="排序" :custom-back="handleBack">
		</u-navbar>
		<u-notice-bar mode="vertical" :list="msgList"></u-notice-bar>
		<HM-dragSorts v-if="formItemList.length!==0" :list="formItemList" :feedbackGeneratorState="false"
					  :isLongTouch="false" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick">
		</HM-dragSorts>
	</view>
</template>

<script>
import dragSorts from '../sort/dragSorts/HM-dragSorts.vue'

export default {
	name: "sort",
	components: {
		'HM-dragSorts': dragSorts
	},
	data() {
		return {
			formKey:'',
			formItemList: [],
			msgList: ['请按住问题后面的图标进行拖动排序'],
			loading: true
		}
	},
	onLoad(options) {
		this.formKey = options.formKey
		this.getFormItemList()
	},
	// 页面周期与 onLoad 同级
	onBackPress() {
		uni.$emit('refreshData')
	},
	methods: {
		getFormItemList(formKey) {
			uni.showLoading({
				title: '加载中...'
			})
			this.$u.api.form.getFormItemList({
				key: this.formKey
			}).then(data => {
				this.loading = false
				this.formItemList = data
				uni.hideLoading()
			})
		},
		handleBack() {
			uni.$emit('refreshData')
			uni.navigateBack({
				delta: 1
			})
		},
		onclick(e) {
		},
		change(e) {
			console.log('=== change start ===');
			console.log("被拖动行: " + JSON.stringify(e.moveRow));
			console.log('原始下标：', e.index);
			console.log('移动到：', e.moveTo);
			console.log('=== change end ===');
		},
		confirm(e) {
			const params = {
				formKey: this.formKey
			}
			let index = e.moveTo
			let list = e.list
			if (list[index - 1]) {
				params.beforePosition = list[index - 1].sort
			}
			if (list[index + 1]) {
				params.afterPosition = list[index + 1].sort
			}
			params.formItemId = list[index].formItemId
			if (params.beforePosition || params.afterPosition) {
				this.$u.api.form.sortProjectItem(params).then(data => {
					this.$u.toast('移动成功')
				})
			}
		}
	}
}
</script>

<style scoped>

</style>
